@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <h2>更新账号</h2>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" action="/admin/store/{{ $store->id }}/update" method="post">
                <input type="hidden" name="id" value="{{$store->id}}">
                {{method_field('put')}}
                @include('admin.store._form')
            </form>
        </div>
    </div>
@endsection
@section('script')
<style>
    #layui-upload-box li{
        width: 120px;
        height: 100px;
        float: left;
        position: relative;
        overflow: hidden;
        margin-right: 10px;
        border:1px solid #ddd;
    }
    #layui-upload-box li img{
        width: 100%;
    }
    #layui-upload-box li p{
        width: 100%;
        height: 22px;
        font-size: 12px;
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 22px;
        text-align: center;
        color: #fff;
        background-color: #333;
        opacity: 0.6;
    }
    #layui-upload-box li i{
        display: block;
        width: 20px;
        height:20px;
        position: absolute;
        text-align: center;
        top: 2px;
        right:2px;
        z-index:999;
        cursor: pointer;
    }
</style>
<script>
    layui.config({
        base: '/static/admin/layuiadmin/' //静态资源所在路径
    }).extend({
        index2: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'upload', 'layedit'], function () {
        var $ = layui.$
            , admin = layui.admin
            , layedit = layui.layedit
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form
            , upload = layui.upload;

        form.render(null, 'component-form-group');

        laydate.render({
            elem: '#LAY-component-form-group-date'
        });


        //多图片上传
        upload.render({
            elem: '#test-upload-more'
            , url: '/admin/uploadFile'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#test-upload-more-list').append('<div class="upload-img-show"><div class="file_close">X</div><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></div>')
                });
            }
            , done: function (res) {
                //上传完毕
                $('#test-upload-more-list').append('<input type="hidden" name="background[]" value="' + res.data + '" />')
            }
        });

        //logo图片上传
        upload.render({
            elem: '#test-upload-logo'
            , url: '/admin/uploadFile'
            , multiple: false
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#test-upload-logo-list').html('<div class="upload-img-show"><div class="file_close">X</div><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></div>')
                });
            }
            , done: function (res) {
                //上传完毕
                $('#test-upload-logo-list').append('<input type="hidden" name="logo" value="' + res.data + '" />')
            }
        });

        //时间选择器
        laydate.render({
            elem: '.data-time'
            ,type: 'time'
            ,range: true
        });

        //建立编辑器
        layedit.set({
            uploadImage: {
                url: '/admin/uploadFile' //接口url
                , type: '' //默认post
            }
        });
        var editorIndex = layedit.build('demo');

        /* 自定义验证规则 */
        form.verify({
            title: function (value) {
                if (value.length < 1) {
                    return '标题至少得1个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                // layedit.sync(value);
            }
            , article_desc: function (value) {
                layedit.sync(editorIndex);
            }
        });

        /* form监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            admin.req({
                url: "/admin/store/{{ $store->id }}/update"
                , method: 'put'
                , data: data.field
                , done: function (res) {
                    //登入成功的提示与跳转
                    layer.msg('成功', {
                        offset: '15px'
                        , icon: 1
                        , time: 1000
                    }, function () {
                        window.history.back(-1);
                    });
                }
            });
            return false;
        });

        // 删除图片
        $(document).on("click", ".file_close", function () {
            var parent = $(this).parent();
            var index = parent.index();
            parent.remove();
            $('[name=background\\[\\]]').eq(index).remove();
        });

    });


</script>
@endsection